<template>
  <a-card>
    <!-- 查询条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" class="formArea">
        <a-collapse v-model="collapseKey" class="collapseArea" expandIconPosition="right">
          <a-collapse-panel key="1">
            <div slot="header" class="collapseArea_header">
              <a-row :gutter="48">
                <a-col @click.stop="() => {}" :md="6" :sm="24">
                  <a-form-item label="案号：">
                    <a-input v-model="queryParam.f_acceptcode" placeholder="请输入案号" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="6" :sm="24">
                  <a-form-item label="被申请人：">
                    <a-input v-model="queryParam.f_targetname" placeholder="请输入被申请人" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="6" :sm="24">
                  <a-form-item label="申请时间">
                    <a-date-picker
                      v-model="queryParam.f_applystarttime"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="queryParam.f_applyendtime"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-button
                    type="primary"
                    class="btn_primary_color"
                    style="margin-left: 20px"
                    @click.stop="search()"
                    icon="search"
                    >查询</a-button
                  >
                  <a-button icon="reload" class="btn_normal_color" style="margin-left: 8px" @click.stop="reQuery"
                    >重置</a-button
                  >
                </a-col>
              </a-row>
            </div>
            <a-row :gutter="48" class="collapseArea_body">
              <a-col @click.stop="() => {}" :md="6" :sm="24">
                <a-form-item label="录入人员">
                  <a-input v-model="queryParam.f_regusername" placeholder="请输入录入人员" allowClear /> </a-form-item
              ></a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <!-- 导出按钮 -->
        <div style="margin-bottom: 16px; margin-top: 10px">
          <a-button type="primary" class="btn_primary_color" style="margin-left: 8px" @click="handleForm('add', '3')"
            >新增案件</a-button
          >
        </div>
      </a-form>
    </div>

    <!-- 自定义表头组件 -->
    <HEADERDEFINITION ref="headerDefRef" :ucolumns="ucolumns" @f_setColumns="s_setColumns" />
    <div class="headerdefBox">
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>重置表格</span>
        </template>
        <img @click="resetting()" style="margin-right: 16px" src="@/assets/icons/table/table_refresh.png" alt="重置" />
      </a-tooltip>

      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>设置表格</span>
        </template>
        <img @click="showHeaderDef($event)" src="@/assets/icons/table/table_config.png" alt="表格设置" />
      </a-tooltip>
    </div>

    <!-- 表格数据 -->
    <a-table
      :scroll="{ x: 800, y: 550 }"
      :columns="ucolumns"
      :data-source="listData"
      :pagination="upagination"
      :loading="loading"
      rowKey="applyid"
      @change="tableChange"
      size="middle"
      :bordered="ubordered"
      :rowClassName="rowClassName"
      :components="header"
      ref="table"
      :key="tableCountKey"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
      </span>

      <div slot="isomissionSlot" slot-scope="isomission" class="overBox" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ isomission == 3200 ? '是' : isomission == 3201 ? '否' : '未知' }}</span>
          </template>
          {{ isomission == 3200 ? '是' : isomission == 3201 ? '否' : '未知' }}
        </a-tooltip>
      </div>

      <div slot="applynameSlot" slot-scope="applyname, record" class="overBox" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ applyname }}</span>
          </template>
          <span class="cursor_pointer" @click="applyClick(record.applyid)">{{ applyname }} </span>
        </a-tooltip>
      </div>

      <div slot="targetnameSlot" slot-scope="targetname" class="overBox" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ targetname }}</span>
          </template>
          {{ targetname }}
        </a-tooltip>
      </div>

      <div slot="statusSlot" slot-scope="status" class="overBox" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ statusLable(status) }}</span>
          </template>
          {{ statusLable(status) }}
        </a-tooltip>
      </div>

      <div slot="acceptcodeSlot" slot-scope="acceptcode" class="overBox" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ acceptcode }}</span>
          </template>
          {{ acceptcode }}
        </a-tooltip>
      </div>

      <div slot="createtimeSlot" slot-scope="createtime" class="overBox" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ createtime }}</span>
          </template>
          {{ createtime }}
        </a-tooltip>
      </div>

      <span slot="operation" slot-scope="text, record">
        <template>
          <a @click="handleForm(record.applyid, '3')">编辑</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="handleForm(record.applyid, '4')">详情</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="handleDel(record.applyid)">
            <a-icon slot="icon" type="delete" />
            <a style="color: #ca0000">删除</a>
          </a-popconfirm>
        </template>
      </span>
    </a-table>

    <ApplyViewComponent ref="ApplyViewComponentRef" />
  </a-card>
</template>
<script>
import drag from '@/components/TableDrag/drag'
import { getReviewPage } from '@/api/accept/apl_admreview.js'
import { delApl_main } from '@/api/apply/apl_main.js'
import { St_admreview } from '@/enumeration/St_admreview'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
export default {
  data() {
    return {
      collapseKey: [], // 折叠面板key
      ucolumns: [
        {
          title: '序号',
          width: 80,
          key: 'index',
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'serial' },
        },
        {
          title: '案号',
          dataIndex: 'acceptcode',
          key: 'acceptcode',
          align: 'left',
          width: 250,
          scopedSlots: { customRender: 'acceptcodeSlot' },
        },
        {
          title: '申请人',
          dataIndex: 'applyname',
          key: 'applyname',
          align: 'left',
          width: 150,
          scopedSlots: { customRender: 'applynameSlot' },
        },
        {
          title: '被申请人',
          dataIndex: 'targetname',
          key: 'targetname',
          align: 'left',
          width: 250,
          scopedSlots: { customRender: 'targetnameSlot' },
        },
        {
          title: '是否行政不作为',
          dataIndex: 'isomission',
          key: 'isomission',
          align: 'left',
          width: 150,
          scopedSlots: { customRender: 'isomissionSlot' },
        },
        {
          title: '录入人员',
          key: 'regusername',
          dataIndex: 'regusername',
          align: 'left',
          width: 120,
        },
        {
          title: '填报时间',
          dataIndex: 'createtime',
          key: 'createtime',
          align: 'left',
          width: 200,
          scopedSlots: { customRender: 'createtimeSlot' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'left',
          scopedSlots: { customRender: 'statusSlot' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 250,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      St_admreview: St_admreview,

      queryParam: {
        f_acceptcode: '', // 案号
        f_regusername: '', // 录入人
        f_targetname: '', // 被申请人
        f_applystarttime: null, // 开始时间
        f_applyendtime: null, // 结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc',
        f_status: null,
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      currentUser: storage.get(APP_USER), // 登录人信息
      header: undefined,
      tableCountKey: 0,
    }
  },
  computed: {},
  created() {
    this.queryParam.f_status = this.St_admreview['written'].value
    this.queryParam.reguserid = this.currentUser.userId
    this.queryList()
    this.headerChange()
  },
  watch: {
    ucolumns: {
      handler(newValue, oldVal) {
        this.headerChange()
      },
      deep: true, // 深度监听
    },
  },
  updated() {},
  methods: {
    // 申请人详情弹框
    applyClick(applyid) {
      this.$refs.ApplyViewComponentRef.f_init(applyid)
    },
    // 搜索
    search() {
      this.queryParam.pageNumber = 1
      this.queryList()
    },
    // 删除未提交案件
    async handleDel(applyid) {
      const { code } = await delApl_main(applyid)
      if (code == 0) {
        this.$message.success('操作成功')
        this.search()
      }
    },
    headerChange() {
      console.log('移动后', this.ucolumns)
      this.header = {
        header: {
          cell: drag.methods.initDrag(this.ucolumns),
        },
      }
    },
    // 重置表头方法
    resetting() {
      this.$refs.headerDefRef.f_resetting()
    },
    // 子组件回调函数, 重置表头
    s_setColumns(columns) {
      this.tableCountKey += 1
      this.ucolumns = columns
    },
    // 显示自定义表头组件
    showHeaderDef(e) {
      this.$refs.headerDefRef.f_init(e)
    },
    // 进入申报页面
    handleForm(applyid, pattern) {
      this.$router.push({
        path: `/AcceptRecordAdd/${applyid}/100000_360100-000201009000-QT-002-02/${pattern}`,
        // query: {
        //   url: '/ent_applyList',
        //   queryParam: this.queryParam
        // }
      })
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen() {
      if (
        this.queryParam.f_applystarttime > this.queryParam.f_applyendtime &&
        this.queryParam.f_applystarttime &&
        this.queryParam.f_applyendtime
      ) {
        this.queryParam.f_applystarttime = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery() {
      this.queryParam = {
        f_acceptcode: '', // 案号
        f_regusername: '', // 录入人
        f_targetname: '', // 被申请人
        f_applystarttime: null, // 开始时间
        f_applyendtime: null, // 结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc',
        f_status: null,
      }
      this.queryParam.f_status = this.St_admreview['written'].value
      this.queryParam.reguserid = this.currentUser.userId
      this.queryList()
    },

    tableChange(upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },

    getCpQueryParam() {
      // 时间转换
      let cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.f_applystarttime?.format) {
        cpQueryParam.f_applystarttime = this.queryParam.f_applystarttime.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_applyendtime?.format) {
        cpQueryParam.f_applyendtime = this.queryParam.f_applyendtime.format('YYYY-MM-DD') + ' 23:59:59'
      }
      return cpQueryParam
    },

    queryList() {
      let queryParam = this.getCpQueryParam()
      if (queryParam.f_acceptcode) {
        queryParam.f_acceptcode = queryParam.f_acceptcode.toString().trim()
      }
      if (queryParam.f_targetname) {
        queryParam.f_targetname = queryParam.f_targetname.toString().trim()
      }
      if (queryParam.f_regusername) {
        queryParam.f_regusername = queryParam.f_regusername.toString().trim()
      }
      this.loading = true
      getReviewPage(queryParam)
        .then((res) => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
          }
        })
        .catch((err) => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 修改对应的状态
    statusLable(val) {
      for (let key in this.St_admreview) {
        if (this.St_admreview[key].value == val) {
          return this.St_admreview[key].name
        }
      }
      return val
    },
    rowClassName(record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue'),
    ApplyViewComponent: () => import('@/views/accept/component/ApplyViewComponent.vue'),
  },
}
</script>


<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

.label-div {
  padding: 10px;
  height: 100%;
  display: inline-block;
  width: 100%;
}

.label-title {
  float: left;
  font-size: 16px;
  font-weight: bold;
}
.add-btn {
  float: right;
  margin-right: 20px;
}
.input-single {
  width: 200px;
}

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: end;
}
.formArea {
  margin-bottom: 30px;
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}

.overBox {
  width: 90%;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
.cursor_pointer:hover {
 color: #1890ff;
}
</style>
